<template> 
    <div class="art-list" @click="jumpDetail(item)">
        <div class="item-left">
            <p class="text-info">{{title}}</p>
            <div class="text-bottom ">
                <span class="time">{{time}}</span>
                <p class="operation float-right">
                    <span><i class="iconfont iconfont-shurukuangchakanmima"></i> {{ records}}</span> 
                    <span ><i class="iconfont iconfont-shoucang"></i>  {{ collects}}</span>
                    <!--<span @click.stop="shoucang(2,item)" v-if="item.is_collect==1"><i class="iconfont iconfont-shoucang shoucang"></i>{{item.collects}}</span>--> 
                </p>
            </div>
        </div>
        <div class="item-right" v-if="imgUrl">
            <div class="item-img">
                <img :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+imgUrl"/>
            </div>
        </div>
    </div> 
</template>

<script>
export default {
    props: {
        title:{
            default:'标题',
            type:String
        },
        item:{
            default:{},
            type:Object
        },
        time:{
            default:'00:00:00',
            type:String
        },
        records:{  //浏览数
            default:'0',  
        },
        collects:{   //收藏数
            default:'0', 
        },
        imgUrl:{
            default:'',
            type:String
        },
    },
    methods:{
        jumpDetail(item){
            this.$emit('jump',item);
        },
        // shoucang(val,item){  
        //     let vm = this;
        //     // setTimeout(()=>{
        //         if(val==1){ 
        //             vm.$emit('shoucang','add',item);
        //         }else{
        //             vm.$emit('shoucang','clear',item);
        //         }
        //     // },500);
            
        // },
    }
}
</script>

<style scoped lang="scss">
.art-list{ 
    width:100%;
    min-height:165rpx;
    display:flex; 
    border-bottom:1rpx solid #E2E2E2;
    padding:25rpx 0;
    background:#fff;
    margin-top:10rpx;
    .item-left{
        flex:1;
        padding: 0 20rpx;
        position:relative;
        .text-info{ 
            box-sizing:border-box;
            color:#333;
            font-size:34rpx;
            font-weight:500;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .text-bottom{
            width:100%;
            position:absolute;
            bottom:0;
            font-size:28rpx;
            padding:0 20rpx;
            box-sizing:border-box;
            .time{
                color:#A5A5A5;
            }
            .operation{
                padding:0 20rpx; 
                color:#666;
                span{
                    margin-right:20rpx;
                }
                .iconfont{
                    display:inline-block;
                    font-size:26rpx;
                    margin-right:10rpx;
                }
                .iconfont-shurukuangchakanmima{
                    font-size:24rpx;
                }
                .iconfont-shoucang{
                    font-size:32rpx;
                }
                .shoucang{
                    color:#FF4444 !important;
                }
            }
        }
    }
    .item-right{
        flex:0 0 240rpx;
        .item-img{
            width:200rpx;
            height:180rpx;
            margin-top:10rpx;
            img{
                width:100%;
                height:100%;
                border-radius:10rpx;
            }
        }
    }
}
</style>
